import { NavBar, List, TextArea, Form } from 'antd-mobile';

import './style.scss';

export default function(props) {
  const [form] = Form.useForm();

  const { onOk, onClose } = props;

  const handleSend = () => {
    form.validateFields().then(value => {
      onOk(value.text);
    });
  }

  return (<div className="sendInstructPage">
    <NavBar
      onBack={onClose} style={{ background: '#fff', border: 'none' }}
      rightContent={<a onClick={handleSend}>发送</a>}>命令消息</NavBar>
    <Form form={form} style={{ margin: '12px 0' }}>
      <List style={{ '--border-top': 0, '--border-bottom': 0 }}>
        <List.Item>
          <TextArea name="text" required rows={4} placeholder="请输入" />
        </List.Item>
      </List>
    </Form>
    <div className="subTip">
      发出后对方上线后才会收到
    </div>
  </div>)
}